<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-form v-show="state.showSearch" :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="时间段" prop="time">
					<el-date-picker
						v-model="state.queryParams.time"
						type="daterange"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						:default-time="state.defaultTime"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="账单日期" align="center" prop="date" />
				<el-table-column label="账单开始时间" align="center" prop="start_time" :formatter="formatterStartTime" />
				<el-table-column label="账单结束时间" align="center" prop="end_time" :formatter="formatterEndTime" />
				<el-table-column label="付款订单信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								金额：{{ row.order_total_amt }}<br />
								订单数：{{ row.order_total_num }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="已关闭订单信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								金额：{{ floatSub(row.order_total_amt, row.real_order_total_amt) }}<br />
								订单数：{{ floatSub(row.order_total_num, row.real_order_total_num) }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="有效订单信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								金额：{{ row.real_order_total_amt }}<br />
								订单数：{{ row.real_order_total_num }}<br />
								货款：{{ row.supplier_cost }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="总供货商成本(含运费)" align="center" prop="supplier_price" :formatter="formatterSupplierPrice" />
				<el-table-column label="件单数" align="center" prop="piece_order_num" />
				<el-table-column label="件单价" align="center" prop="piece_order_amt" />
				<el-table-column label="客单数" align="center" prop="guest_order_num" />
				<el-table-column label="客单价" align="center" prop="guest_order_amt" />
				<el-table-column label="毛利额" align="center" prop="annual_gross_profit" />
				<el-table-column label="平均毛利率" align="center" prop="annual_gross_rate" />
				<el-table-column label="实际佣金信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								铜牌佣金：{{ row.real_agent_amt1 }}<br />
								银牌佣金：{{ row.real_agent_amt2 }}<br />
								金牌佣金：{{ row.real_agent_amt3 }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="总佣金信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								铜牌佣金：{{ row.agent_amt1 }}<br />
								银牌佣金：{{ row.agent_amt2 }}<br />
								金牌佣金：{{ row.agent_amt3 }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="佣金比率信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								铜牌佣金比：{{ row.agent_amt1_rate }}%<br />
								银牌佣金比：{{ row.agent_amt2_rate }}%<br />
								金牌佣金比：{{ row.agent_amt3_rate }}%<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="总培养奖励" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								总银牌培养奖励：{{ row.train_amt4 }}<br />
								总金牌培养奖励：{{ row.train_amt5 }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="总有效佣金" align="center" prop="real_agent_all" width="150" />
				<el-table-column label="总佣金" align="center" prop="agent_all" width="150" />
				<el-table-column label="操作" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-button type="primary" @click="onViewGoodsStatisticsDialog(row)" link>商品统计</el-button>
					</template>
				</el-table-column>
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
			<GoodsStatisticsDialog ref="supplierWithdrawTrialDialogRef" />
		</el-card>
	</div>
</template>

<script setup lang="ts" name="daysStatistics">
import { inject, onMounted, reactive, ref, defineAsyncComponent } from 'vue';
import { statisticsApi } from '/@/api';
import { floatSub, floatAdd, timeDictionary } from '/@/utils/dictionary';

const GoodsStatisticsDialog = defineAsyncComponent(() => import('./dialog/goodsStatisticsDialog.vue'));

const Dayjs: any = inject('dayjs');
const StatisticsApi = statisticsApi();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		time: [] as any,
		start_time: '',
		end_time: '',
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
	defaultTime: [new Date(Dayjs().year(), Dayjs().month(), Dayjs().date()), new Date(Dayjs().year(), Dayjs().month(), Dayjs().date())],
});
const queryFormRef = ref();
const supplierWithdrawTrialDialogRef = ref();

onMounted(() => {
	getList();
});

/********** 触发事件 **********/
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	onQuery();
};
// 查看商品统计
const onViewGoodsStatisticsDialog = (row: any) => {
	supplierWithdrawTrialDialogRef.value.openDialog(row);
};

/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	state.queryParams.start_time = state.queryParams.time && Dayjs(state.queryParams.time[0]).unix();
	state.queryParams.end_time = state.queryParams.time && Dayjs(state.queryParams.time[1]).unix();
	_daysStatistics(state.queryParams);
};
// 账单开始时间字典
const formatterStartTime = (row: any) => {
	return timeDictionary(row.start_time);
};
// 账单结束时间字典
const formatterEndTime = (row: any) => {
	return timeDictionary(row.end_time);
};
// 总供货商成本(含运费)字典
const formatterSupplierPrice = (row: any) => {
	return floatAdd(row.supplier_cost, row.supplier_freight);
};

/********** 网络事件 **********/
// 每日统计
const _daysStatistics = (params: Object) => {
	StatisticsApi.daysStatistics(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
</script>
